window.addEventListener('load', function () {
    let total = document.querySelector('.total')
    let avgAge = document.querySelector('.avgAge')
    let avgSalary = document.querySelector('.avgSalary')
    let proportion = document.querySelector('.proportion')
    // 一：班级信息概览
    // 1：发起ajax请求，实现动态渲染
    axios({
        url: '/student/overview'
    }).then(({ data: { data } }) => {
        total.innerHTML = data.total
        avgAge.innerHTML = data.avgAge
        avgSalary.innerHTML = data.avgSalary
        proportion.innerHTML = data.total
    })

    // 二：获取学员信息
    axios({
        url: '/student/list'
    }).then(({ data: { data } }) => {
        // 收集饼图数据
        let pieArr = []
        // 折线图数组
        let names = [], salarys = [], truesalarys = []
        // 地图数据
        let chinaGeoCoordMap = {}
        let chinaDatas = []
        // 收集饼图所需要的数据--数据改造
        // 遍历数据源
        data.forEach(function (value) {
            // 使用当前遍历到的省份名称取pieArr中查找，看看是否能找到
            let result = pieArr.filter(function (v) {
                return v.name == value.province
            })[0]
            if (result) {
                // 如果当前遍历到的省份存在，就修改数量+1
                result.value++
            } else {
                // 如果当前遍历到的省份不存在，则添加一个新的对象，且数量为1
                pieArr.push({ name: value.province, value: '1' })
            }

            // 收集折线图所需要的数据--数据改造
            names.push(value.name)
            salarys.push(value.salary)
            truesalarys.push(value.truesalary)
            
            // 收集地图所需要的数据
            chinaGeoCoordMap[value.province] = [value.jing,value.wei]
            chinaDatas.push([{name:value.province,value:0}])
        })
        // 根据数据渲染出动态饼图
        drawPie(pieArr)

        // 根据数据渲染出动态折线图
        drawLine(names, salarys, truesalarys)

        // 根据数据渲染出动态地图
        mapChart(chinaGeoCoordMap,chinaDatas)
    })

    // 三：籍贯--饼图
    // 1：添加静态饼图
    // 2：实现饼图的动态渲染
    function drawPie(data) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.querySelector('.pie'))

        // 指定图表的配置项和数据
        let option = {
            title: {
                text: '籍贯 HomeTown'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
                {
                    name: '各地人员分布',
                    type: 'pie',
                    radius: [20, 140],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 6
                    },
                    data
                }
            ]
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
    }

    // 四：薪资--折线图
    function drawLine(names, salarys, truesalarys) {
        let myChart = echarts.init(document.querySelector('.line'))

        let option = {
            xAxis: {
                type: 'category',
                data: names
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['期望薪资', '实际薪资']
            },
            dataZoom: [
                {
                    start: 0,
                    end: 100
                }
            ],
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '期望薪资',
                    data: salarys,
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        color: 'red'
                    },
                    symbol: 'none'
                },
                {
                    name: '实际薪资',
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    data: truesalarys,
                    itemStyle: {
                        color: 'blue'
                    },
                    symbol: 'none'
                }
            ],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '20%',
                containLabel: true
            }
        }
        myChart.setOption(option)
    }

    // 五：按次查询成绩
    function getScore(batch) {
        axios({
            url: '/score/batch',
            params: { batch }
        }).then(res => {
            // console.log(res)
            // 判断成绩是否存在
            if(res.data.code == 0){
                drawBar(res.data.data)
            }else{
                toastr.warning(res.data.message)
            }
            
        })
    }
    // 默认显示第一次
    getScore(1)

    // 六：成绩--柱状图
    function drawBar(obj) {
        let myChart = echarts.init(document.querySelector('.barChart'))
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data: ['平均分', '低于60分人数', '60到80分之间', '高于80分人数']
            },
            xAxis: [
                {
                    type: 'category',
                    data: obj.group,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    min: 0,
                    max: 100,
                    interval: 10,
                    axisLabel: {
                        formatter: '{value} 分'
                    }
                },
                {
                    type: 'value',
                    min: 0,
                    max: 10,
                    interval: 1,
                    axisLabel: {
                        formatter: '{value} 人'
                    }
                }
            ],
            series: [
                {
                    name: '平均分',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 人';
                        }
                    },
                    data: obj.avgScore
                },
                {
                    name: '低于60分人数',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 人';
                        }
                    },
                    data: obj.lt60,
                    yAxisIndex: 1
                }, {
                    name: '60到80分之间',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 人';
                        }
                    },
                    data: obj.gt60,
                    yAxisIndex: 1
                },
                {
                    name: '高于80分人数',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 人';
                        }
                    },
                    data: obj.gt80,
                    yAxisIndex: 1,
                }
            ],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '2%',
                top: '12%',
                containLabel: true
            }
        }
        myChart.setOption(option)
    }

    // 七：实现按次查询成绩
    let btn = document.querySelector('.btn')
    let batch = document.querySelector('#batch')
    btn.addEventListener('click',function(){
        if(batch.style.display == 'block'){
            batch.style.display = 'none'
        }else{
            batch.style.display = 'block'
        }
    })
    batch.addEventListener('click',function(e){
        if(e.target.localName == 'a'){
           getScore(e.target.dataset.batch)
        }
    })

    // 八：地图
    function mapChart(chinaGeoCoordMap,chinaDatas) {
        let myChart = echarts.init($('.map')[0]);
        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = chinaGeoCoordMap[dataItem[0].name];
            var toCoord = [113.43441,23.135518];
            if (fromCoord && toCoord) {
              res.push([{
                coord: fromCoord,
                value: dataItem[0].value
              }, {
                coord: toCoord,
              }]);
            }
          }
          return res;
        };
        var series = [];
        [['广东省', chinaDatas]].forEach(function (item, i) {
          console.log(item)
          series.push({
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', //箭头图标
              symbolSize: 5, //图标大小
            },
            lineStyle: {
              normal: {
                width: 1, //尾迹线条宽度
                opacity: 1, //尾迹线条透明度
                curveness: .3 //尾迹线条曲直度
              }
            },
            data: convertData(item[1])
          }, {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: { //涟漪特效
              period: 4, //动画时间，值越小速度越快
              brushType: 'stroke', //波纹绘制方式 stroke, fill
              scale: 4 //波纹圆环最大限制，值越大波纹越大
            },
            label: {
              normal: {
                show: true,
                position: 'right', //显示位置
                offset: [5, 0], //偏移设置
                formatter: function (params) {//圆环显示文字
                  return params.data.name;
                },
                fontSize: 13
              },
              emphasis: {
                show: true
              }
            },
            symbol: 'circle',
            symbolSize: function (val) {
              return 5 + val[2] * 5; //圆环大小
            },
            itemStyle: {
              normal: {
                show: false,
                color: '#f00'
              }
            },
            data: item[1].map(function (dataItem) {
              return {
                name: dataItem[0].name,
                value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
              };
            }),
          },
            //被攻击点
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              rippleEffect: {
                period: 4,
                brushType: 'stroke',
                scale: 4
              },
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  //offset:[5, 0],
                  color: '#0f0',
                  formatter: '{b}',
                  textStyle: {
                    color: "#0f0"
                  }
                },
                emphasis: {
                  show: true,
                  color: "#f60"
                }
              },
              symbol: 'pin',
              symbolSize: 50,
              data: [{
                name: item[0],
                value: chinaGeoCoordMap[item[0]].concat([10]),
              }],
            }
          );
        });
      
        // 
        let option = {
          // 标题
          title: {
            // left: 'center',
            text: '来广路线 From',
            textStyle: {
              color: '#6d767e'
            }
          },
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(166, 200, 76, 0.82)',
            borderColor: '#FFFFCC',
            showDelay: 0,
            hideDelay: 0,
            enterable: true,
            transitionDuration: 0,
            extraCssText: 'z-index:100',
            formatter: function (params, ticket, callback) {
              //根据业务自己拓展要显示的内容
              var res = "";
              var name = params.name;
              var value = params.value[params.seriesIndex + 1];
              res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
              return res;
            }
          },
          backgroundColor: "#fff",
          visualMap: { // 图例值控制（官方叫做视觉映射组件）
            min: 0,
            max: 1,
            calculable: true,
            show: false,
            color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
            textStyle: {
              color: '#fff'
            }
          },
          geo: {
            map: 'china',
            zoom: 1.2,
            label: {
              emphasis: {
                show: false
              }
            },
            roam: true, //是否允许缩放
            itemStyle: {
              normal: {
                color: 'rgba(51, 69, 89, .5)', //地图背景色
                borderColor: '#516a89', //省市边界线00fcff 516a89
                borderWidth: 1
              },
              emphasis: {
                color: 'rgba(37, 43, 61, .5)' //悬浮背景
              }
            }
          },
          series: series
        };
      
        myChart.setOption(option);
      }
})